<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example-1">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>

    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ mul_message }}</p>
    <br>
    <textarea v-model="mul_message" placeholder="add multiple lines"></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <br>

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

</div>

<div id="example-2">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>

<h1>Modifiers</h1>
<h2>.lazy</h2>
<h3>By default, v-model syncs the input with the data after each input event (with the exception of IME composition, as stated above). You can add the lazy modifier to instead sync after change events:</h3>

<h2>.number</h2>

<h3>If you want user input to be automatically typecast as a Number, you can add the number modifier to your v-model managed inputs:</h3>


<h2>.trim</h2>
<h3>If you want whitespace from user input to be trimmed automatically, you can add the trim modifier to your v-model-managed inputs:</h3>



</body>
<script>
    var example1 = new Vue({
        el: "#example-1",
        data: {
            message: "",
            mul_message : "",
            checked: true,
            checkedNames : []
        }
    });

    var example2 = new Vue({
        el: "#example-2",
        data: {
            picked: ''
        }
    })
</script>
</html>